import React from 'react';
// 演示 useEffect hook 的使用
import { useEffect,useState } from "react"
const App = () => {
  let [num,setNum] = useState(0);
  let [str,setStr] = useState("(*^_^*)");
  // 1. useEffect 后面不加第二参数的情况下 相当于componentDidMount 以及 componentDidUpdate 生命周期的合体
  useEffect(()=>{
    console.log("组件渲染了");
  })
  // 2. useEffect 第二参数是 空数组的，作用相当于componentDidMount生命周期 发请求获取数据
  // useEffect(()=>{
  //   console.log("组件渲染了");
  // },[])
  // useEffect 第二参数不是一个空数组了 
  useEffect(()=>{
    console.log("依赖发生变化");
  },[num]) // 只有num 发生变化的时候，回调函数才会执行
  return (
    <div>
      <h1>123</h1>
      <h1>{num}</h1>
      <button onClick={()=>{
        setNum(num+1)
      }}>加1</button>
    </div>
  );
}

export default App;
